app.component("demo-dynamic", {
    template: `
    <div class='demo-dynamic'>
        <button v-for="tab in tabs" @click="currentTabComponent = 'tab-'+tab" class="tab-button">{{tab}}</button>

        <!-- <tab-home></tab-home> -->
        <!-- <tab-posts></tab-posts> -->
        <!-- <tab-archive></tab-archive> -->

        <!-- 
        动态组件 
        :is="currentTabComponent" 数据项currentTabComponent的当前值是哪个组件名 这里就渲染哪个组件
        动态组件正常切换=旧组件卸载+新组件挂载
        keep-alive包裹动态组件时=组件一旦挂载就直接缓存其数据 在动态组件切换时 直接调用缓存
        -->
        <keep-alive>
            <component :is="currentTabComponent"></component>
        </keep-alive> 
    </div>
    `,
    data() {
        return {
            tabs: ["home", "posts", "archive"],
            currentTabComponent: 'tab-archive'
        }
    },
    methods: {},
    computed: {}
})

/* 首页组件 */
app.component("tab-home", {
    template: `<div class="demo-tab">首页组件</div>`,

    /* 组件挂载完毕时回调 */
    mounted() {
        console.log("home挂载完毕");
    },

    /* 组件卸载完毕时回调 */
    unmounted() {
        console.log("home卸载完毕驾鹤西去");
    }
})

/* 博文组件 */
app.component("tab-posts", {
    data() {
        return {
            posts: [
                {
                    id: 1,
                    title: "薛定谔的猫",
                    content: "Brother Xue's HelloKitty, adipisicing elit. Nihil consequatur debitis a iste officiis nesciunt animi architecto, odit unde quos optio, numquam voluptatibus repellendus fugit porro reprehenderit quae explicabo saepe?"
                },
                {
                    id: 2,
                    title: "朕的狗狗",
                    content: "My puppy, adipisicing elit. Nihil consequatur debitis a iste officiis nesciunt animi architecto, odit unde quos optio, numquam voluptatibus repellendus fugit porro reprehenderit quae explicabo saepe?"
                },
                {
                    id: 3,
                    title: "碧竹苑的你",
                    content: "Somebody is very beautiful, adipisicing elit. Nihil consequatur debitis a iste officiis nesciunt animi architecto, odit unde quos optio, numquam voluptatibus repellendus fugit porro reprehenderit quae explicabo saepe?"
                },
            ],
            selectedPost: null
        }
    },
    template: `    
    <ul id="post-list">
        <li v-for="post in posts" @click="selectedPost=post">{{post.title}}</li>
    </ul>
    <p>{{selectedPost?selectedPost.content:'今晚打老虎'}}</p>
    `,
})

/* 个人中心组件 */
app.component("tab-archive", {
    template: `<div class="demo-tab">个人中心</div>`,
    /* 组件挂载完毕时回调 */
    mounted() {
        console.log("archive挂载完毕");
    },

    /* 组件卸载完毕时回调 */
    unmounted() {
        console.log("archive卸载完毕驾鹤西去");
    }
})
